<template>
  <div class="flex flex-col items-center gap-4">
    <!-- 作者头像和关注按钮 -->
    <div class="flex flex-col items-center gap-2" @click="handleUserClick">
      <Avatar :src="video.author_avatar" size="medium" />
      <Button type="primary" size="small" @click.stop="handleFollow" :loading="followLoading" class="mt-2">
        <p v-if="!video.followed">
          +
        </p>
      </Button>
    </div>

    <!-- 操作按钮 -->
    <div class="flex flex-col items-center gap-1">
      <!-- 点赞按钮 -->
      <div class="flex flex-col items-center">
        <Button type="tertiary" :icon="h(IconLikeHeart)" :theme="video.liked ? 'solid' : 'light'"
          :style="{ color: video.liked ? '#ff2c55' : '#fff' }" @click="handleLike" :loading="likeLoading">
        </Button>
        <span>{{ formatNumber(video.like_num) }}</span>
      </div>

      <!-- 评论按钮 -->
      <div class="flex flex-col items-center">
        <Button size="small" type="tertiary" :icon="h(IconComment)" theme="light" style="color: #fff"
          @click="handleComment">
        </Button>
        <span>{{ formatNumber(video.comment_num) }}</span>
      </div>

      <!-- 分享按钮 -->
      <div class="flex flex-col items-center">
        <Button size="small" type="tertiary" :icon="h(IconStar)" theme="light" style="color: #fff" @click="handleShare">
        </Button>
        <span>{{ formatNumber(video.share_num) }}</span>
      </div>

      <!-- 收藏按钮 -->
      <div class="flex flex-col items-center">
        <Button size="small" type="tertiary" :icon="h(IconForward)" :theme="video.favorited ? 'solid' : 'light'"
          :style="{ color: video.favorited ? '#ffcd32' : '#fff' }" @click="handleFavorite" :loading="favoriteLoading">
        </Button>
        <span>{{ formatNumber(video.favorite_num) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { h, ref, computed } from 'vue'
import { useAccountStore } from '@/stores/account'
import type { Video } from '@/services/video/video.types'
import { Avatar, Toast, Button, } from '@kousum/semi-ui-vue'
import { IconLikeHeart, IconComment, IconStar, IconForward } from '@kousum/semi-icons-vue'
import services from '@/services'

const props = defineProps<{
  video: Video
}>()

const video = ref<Video>(props.video)

const emit = defineEmits<{
  (e: 'like', video: Video): void
  (e: 'comment', video: Video): void
  (e: 'favorite', video: Video): void
  (e: 'share', video: Video): void
  (e: 'follow', userId: string): void
  (e: 'user', userId: string): void
}>()

const accountStore = useAccountStore()

// 加载状态
const likeLoading = ref(false)
const favoriteLoading = ref(false)
const followLoading = ref(false)

// 计算属性
const isFollowing = computed(() => props.video.followed ?? false)

// 格式化数字
const formatNumber = (num: number): string => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  }
  return num.toString()
}

// 处理点击用户头像
const handleUserClick = () => {
  if (!accountStore.user) {
    Toast.error('请先登录')
    return
  }
  emit('user', props.video.author_id)
}

// 处理关注
const handleFollow = async (event: Event) => {
  event.stopPropagation() // 阻止事件冒泡

  if (accountStore.user) {
    Toast.error('请先登录')
    return
  }

  try {
    followLoading.value = true
    if (isFollowing.value) {
      await services.user.unfollowUser(props.video.author_id)
      video.value.followed = false
    } else {
      await services.user.followUser(props.video.author_id)
      video.value.followed = true
    }
    emit('follow', props.video.author_id)
    Toast.success(isFollowing.value ? '已取消关注' : '关注成功')
  } catch (error) {
    console.error(error)
    Toast.error('操作失败，请重试')
  } finally {
    followLoading.value = false
  }
}

// 处理点赞
const handleLike = async () => {
  if (!accountStore.user) {
    Toast.error('请先登录')
    return
  }

  try {
    likeLoading.value = true
    if (video.value.liked) {
      await services.video.unlikeVideo(props.video.id)
      video.value.liked = false
      video.value.like_num--
    } else {
      await services.video.likeVideo(props.video.id)
      video.value.liked = true
      video.value.like_num++
    }
    emit('like', props.video)
  } catch (error) {
    Toast.error('操作失败，请重试')
    console.error(error)
  } finally {
    likeLoading.value = false
  }
}

// 处理评论
const handleComment = () => {
  if (!accountStore.user) {
    Toast.error('请先登录')
    return
  }
  emit('comment', props.video)
}

// 处理分享
const handleShare = () => {
  // 这里可以添加分享逻辑，比如复制链接或打开分享弹窗
  const shareUrl = `${window.location.origin}/video/${props.video.id}`
  navigator.clipboard
    .writeText(shareUrl)
    .then(() => {
      Toast.success('链接已复制到剪贴板')
      video.value.share_num++
      emit('share', props.video)
    })
    .catch(() => {
      Toast.error('复制失败，请重试')
    })
}

// 处理收藏
const handleFavorite = async () => {
  if (!accountStore.user) {
    Toast.error('请先登录')
    return
  }

  try {
    favoriteLoading.value = true
    if (props.video.favorited) {
      await services.video.unfavoriteVideo(props.video.id)
      video.value.favorited = false
      video.value.favorite_num--
    } else {
      await services.video.favoriteVideo(props.video.id)
      video.value.favorited = true
      video.value.favorite_num++
    }
    emit('favorite', props.video)
  } catch (error) {
    console.error(error)
    Toast.error('操作失败，请重试')
  } finally {
    favoriteLoading.value = false
  }
}
</script>
